<!-- 账号密码登录 accountLogin  -->
<template>
  <view>
    <!-- 标题栏 -->
    <view class="head-box ss-m-b-60 ss-flex-col">
      <view class="ss-flex ss-m-b-20">
        <view class="head-title-active head-title-line" @tap="showAuthModal('smsLogin')"> 短信登录 </view>
        <view class="head-title ss-m-r-40 head-title-animation">账号登录</view>
      </view>
      <view class="head-subtitle">如果未设置过密码，请点击忘记密码</view>
    </view>

    <!-- 表单项 -->
    <uni-forms
      ref="accountLoginRef"
      v-model="state.model"
      :rules="state.rules"
      validate-trigger="bind"
      label-width="140"
      label-align="center"
    >
      <uni-forms-item name="mobile" label="账号">
        <uni-easyinput v-model="state.model.mobile" placeholder="请输入账号" :input-border="false">
          <template #right>
            <button class="ss-reset-button forgot-btn" @tap="showAuthModal('resetPassword')">忘记密码</button>
          </template>
        </uni-easyinput>
      </uni-forms-item>

      <uni-forms-item name="password" label="密码">
        <uni-easyinput v-model="state.model.password" type="password" placeholder="请输入密码" :input-border="false">
          <template #right>
            <button class="ss-reset-button login-btn-start" @tap="accountLoginSubmit">登录</button>
          </template>
        </uni-easyinput>
      </uni-forms-item>
    </uni-forms>
  </view>
</template>

<script setup>
import { ref, reactive, unref } from 'vue'
import sheep from '@/sheep'
import { mobile, password } from '@/sheep/validate/form'
import { showAuthModal, closeAuthModal } from '@/hooks/useModal'
import AuthUtil from '@/api/member/auth'

const accountLoginRef = ref(null)

const emits = defineEmits(['onConfirm'])

const props = defineProps({
  agreeStatus: {
    type: Boolean,
    default: false,
  },
})

// 数据
const state = reactive({
  model: {
    mobile: '', // 账号
    password: '', // 密码
  },
  rules: {
    mobile,
    password,
  },
})

// 账号登录
async function accountLoginSubmit() {
  // 表单验证
  const validate = await unref(accountLoginRef)
    .validate()
    .catch((error) => {
      console.log('error: ', error)
    })
  if (!validate) return

  // 同意协议
  if (!props.agreeStatus) {
    emits('onConfirm', true)
    sheep.$helper.toast('请勾选同意')
    return
  }

  // 提交数据
  const { code, data } = await AuthUtil.login(state.model)
  if (code === 0) {
    closeAuthModal()
  }
}
</script>

<style lang="scss" scoped>
@import '../index.scss';
</style>
